<template>
	<view class="warp">
		<view class="topimage">
			<image class="banner_image" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/001.png" mode=""></image>
		</view>
		<view class="iconlist flex_row_around_center">
			<view class="icon_item" v-for="(item,index) in moduleList" :key="index" @click="natTostudy(item,index)">
				<image class="item_img" :src="item.imgUrl" mode="aspectFit"></image>
				<view class="item_text">{{item.name}}</view>
			</view>
		</view>
		<!-- 热门课程 -->
		<view class="hotclass">
			<view class="hot_title flex_row_between_center" @click="tocourselist(1)">
				<view class="ht_left">热门课程</view>
				<view class="ht_right">
					<view >查看更多</view>
					<uni-icons color="#9B9B9B" type="forward" size="14"></uni-icons>
				</view>
			</view> 
			<view class="hot_list">
				<view class="hot_item flex_row_start_start" v-for="(item,index) in list.hotCourseList" :key="index"  @click="tocourseinfo(item)">
					<view class="hot_left">
						<image class="hot_left_image"   :src="item.courseImage" mode="aspectFill"></image>
						<!-- <view class="hot_left_bottom">
							<view class="name">刘小欣</view>
							<view class="zhiwei">中国地坪协会首席专家</view>
						</view> -->
					</view>
					<view class="hot_right">
						<view class="r_top_classname">{{item.courseName}}</view>
						<view class="r_lite_classname">{{item.courseIntro}}</view>
						<view class="r_bottom flex_row_between_center">
							<view class="r_b_left">{{item.chargeOrNot==0 ? '免费':'收费'}}</view>
							<view class="r_b_right flex_row_start_center">
								<view>{{item.coursePeople}}</view>
								<view>人已学习</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--新上好课 -->
		<view class="newclass">
			<view class="hot_title flex_row_between_center" @click="tocourselist(2)">
				<view class="ht_left">新上好课</view>
				<view class="ht_right">
					<view >查看更多</view>
					<uni-icons color="#9B9B9B" type="forward" size="14"></uni-icons>
				</view>
			</view>
			<view class="new_list flex_row_start_center">
				<view class="new_item" @click="tocourseinfo(item)"  v-for="(item,index) in list.goodCourseList" :key="index">
					<view class="hot_left">
						<image class="hot_left_img"  :src="item.courseImage" mode="aspectFill"></image>
					<!-- 	<view class="hot_left_bottom">
							<view class="name">刘小欣</view>
							<view class="zhiwei">中国地坪协会首席专家</view>
						</view> -->
					</view>
					<view class="i_bottom">
						<view class="r_top_classname">{{item.courseName}}</view>
						<view class="r_bottom flex_row_between_center">
							<view class="r_b_left">{{item.chargeOrNot==0 ? '免费':'收费'}}</view>
							<view class="r_b_right flex_row_start_center">
								<view>{{item.coursePeople}}</view>
								<view>人已学习</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 新手入门 -->
	<!-- 	<view class="newhand">
			<view class="hot_title flex_row_between_center" @click="tocourselist(3)">
				<view class="ht_left">新手入门 </view>
				<view class="ht_right">
					<span  style="color: #cecece;display: block;">查看更多</span>
					<uni-icons color="#cecece" type="forward" size="14"></uni-icons>
				</view>
			</view>
			<view class="hot_list">
				<view class="hot_item flex_row_start_start" v-for="(item,index) in 4" :key="index"  @click="tocourseinfo(item)">
					<view class="hot_left">
						<image class="hot_left_image"   src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/013.png" mode="aspectFill"></image>
						<view class="hot_left_bottom">
							<view class="name">刘小欣</view>
							<view class="zhiwei">中国地坪协会首席专家</view>
						</view>
					</view>
					<view class="hot_right">
						<view class="r_top_classname">如何控制混凝土开裂</view>
						<view class="r_lite_classname">专业解读如何控制混凝土开裂</view>
						<view class="r_bottom flex_row_between_center">
							<view class="r_b_left">免费</view>
							<view class="r_b_right flex_row_start_center">
								<view>256</view>
								<view>人已学习</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="" style="height: 200rpx;"></view>
		<tabBar selectedIndex = 0  ></tabBar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				moduleList:[
					// {name:'热力榜',imgUrl:"https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/004.png",router:''},
					{name:'系列课程',imgUrl:"https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/002.png",router:'/extra/classlist/classlist' },
					{name:'收藏课程',imgUrl:"https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/003.png",router: '/extra/institutehome/studyRecord'},
					{name:'学习记录',imgUrl:"https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/005.png",router: '/extra/institutehome/studyRecord'},
				],
				list:[]
			};
		},
		onLoad(){
			this.getlist()
			// (this.$Route.query
		},
		methods:{
			//获取列表数据
			getlist(){
				let param = {};
				param.url = 'v3/study/front/course/index';
				param.data={}
				param.data.collectType=3
				this.$request(param).then(res=>{
					console.log(res);
					if(res.state==200){
						this.list=res.data
					}
				})
			},
			//学习记录
			natTostudy(item,index){
				if(!item.router) return false;
				let type;
				if(index==3){
					type=1
				}else if(index==2){
					type=0
				}else{
					type=0
				}
				this.$Router.push({
					path:item.router,
					query: {
						type: type 
					}
				})
				
			},
			// 列表
			tocourselist(val){
				// uni.navigateTo({
				// 	url:"/extra/courselist/courselist?type="+val
				// })
				this.$Router.push({
					path: '/extra/courselist/courselist',
					query: {
						type: val
					}
				})
			},
			// 详情
			tocourseinfo(item){
				console.log(item);
				// uni.navigateTo({
				// 	url:"/extra/courseinfo/courseinfo"
				// })
				this.$Router.push({
					path: '/extra/courseinfo/courseinfo',
					query: {
						courseId: item.courseId
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f2f2f2;
		width: 750rpx;
		margin: 0 auto;
	}
    
	.topimage{
		width: 750rpx;
		padding: 0 32rpx;
		.banner_image{
			width:686rpx ;
			height: 208rpx;
			border-radius: 15rpx;
		}
	}
	.iconlist{
		background-color: #fff;
		padding: 58rpx 80rpx 44rpx 82rpx;
		.icon_item{
			text-align: center;
			
			.item_img{
				width: 52rpx;
				height: 56rpx;
			}
			.item_text{
				font-size: 24rpx;
				color: #666666;
				margin-top: 16rpx;
			}
		}
	}
	.newhand,.hotclass{
		padding: 0 32rpx;
		background-color: #fff;
		.hot_title{
			padding-left: 24rpx;
			
			.ht_right{
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #9B9B9B;
			}
			.ht_left{
				font-size: 32rpx;
				font-weight: bold;
				color: #000000;
			}
		}
		
	}
	.hot_list{
		margin-top: 24rpx;
		.hot_item{
			padding-bottom: 16rpx;
			.hot_left{
				width: 258rpx;
				height: 168rpx;
				// background-image: url('https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/012.png');
				 // background-color: red;
				 // background-size: contain;
				margin-right: 24rpx;
				position: relative;
				
				.hot_left_image{
					width: 258rpx;
					height: 168rpx;
					border-radius: 15rpx;
				}
				.hot_left_bottom{
					width: 100%;
					background-color: #b33129;
					font-size: 18rpx;
					color: #fff;
					border-radius: 10rpx;
					padding: 6rpx 10rpx;
					position: absolute;
					bottom: 0;
					height: 65rpx;
					.name{
						margin-bottom: 5rpx;
					}
				}
			}
			.hot_right{
				width: 438rpx;
				padding-top: 20rpx;
				.r_top_classname{
					font-size: 28rpx;
					font-weight: 600;
				}
				.r_lite_classname{
					width: 428rpx;
					font-size: 24rpx;
					color: #666666;
					margin-top: 8rpx;
					// background-color: red;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;

				}
				.r_bottom{
					margin-top: 42rpx;
					
					.r_b_left{
						color: #F12B10;
						font-size: 24rpx;
					}
					.r_b_right{
						font-size: 24rpx;
						color: #9B9B9B;
					}
				}
			}
		}
	}
	.newclass{
		padding: 0 32rpx;
		margin-top:56rpx ;
		background-color: #fff;
		.hot_title{
			padding-left: 24rpx;
			
			.ht_right{
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #9B9B9B;
			}
			.ht_left{
				font-size: 32rpx;
				font-weight: bold;
				color: #000000;
			}
		 }
		.new_list{
		   padding: 28rpx 0rpx 0 0rpx;
		}
		.new_item{
			 width: 338rpx;
			 margin-right: 16rpx;
			 &:nth-child(2n){
				 margin-right: 0;
			 }
			
			   .hot_left{
				   position: relative; 
				   background-image: url('https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/staduy2.0/012.png');
				   background-size: contain;
				   
				   .hot_left_img{
						 width: 338rpx;
						 height: 194rpx;
				   }
			   }
				.hot_left_bottom{
					width: 100%;
					background-color: #b33129;
					font-size: 18rpx;
					color: #fff;
					border-radius: 10rpx;
					padding: 10rpx 15rpx;
					position: absolute;
					bottom: 0;
					height: 65rpx;
					.name{
						margin-bottom: 5rpx;
					}
				}
				.i_bottom{
					margin-top: 10rpx;
					.r_top_classname{
						font-size: 28rpx;
						font-weight: bold;
					}
					
					.r_bottom{
						margin-top: 20rpx;
						
						.r_b_left{
							color: #F12B10;
							font-size: 24rpx;
						}
						.r_b_right{
							font-size: 24rpx;
							color: #666666;
						}
					}
				}
		}
	}
	
	.newhand{
		margin-top: 56rpx;
	}

</style>
